<template>
	<div class="list-switch">
		<div class="item-card" :class="['item', current === 'card' ? 'active' : '']" @click="handleChange('card')">
			<i class="iconfont icon-kapianmoshi"></i>
		</div>
		<div class="item-table" :class="['item', current === 'table' ? 'active' : '']" @click="handleChange('table')">
			<i class="iconfont icon-liebiaomoshi"></i>
		</div>
	</div>
</template>

<script lang="ts" setup name="ListSwitch">
import { computed } from "vue";
const emits = defineEmits(["change"]);
const props = defineProps({
	active: {
		type: String,
		default: "card" // table
	}
});

const current = computed({
	get() {
		return props.active;
	},
	set(val) {
		emits("change", val);
	}
});

const handleChange = (type: string) => {
	current.value = type;
};
</script>

<style lang="scss" scoped>
.list-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 84px;
	height: 32px;
	background: #f3f6fa;
	border-radius: 4px;

	.item {
		text-align: center;
		line-height: 28px;
		width: 40px;
		height: 28px;
		border-radius: 4px;
		color: #b6c4d6;
		cursor: pointer;

		i {
			font-size: 20px;
		}
	}

	.active {
		background: #6283ef;
		color: #fff;
	}
}
</style>
